<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>

    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

    <script type="text/javascript">
        const siteUrl = "./",
            musicMp3 = "bgm.mp3"
    </script>

    <link rel="stylesheet" type="text/css" href="css/music.css"/>
    <link rel="stylesheet" type="text/css" href="css/animate.css"/>
    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <title>中秋猜灯谜</title>
</head>
<body>

<div class="pop-bg">
    <div class="pop-box" id="tips">
        <img class="pop-close" src="images/pop_close_img.png" alt=""/>
        <div class="pop-box-title">提示</div>
        <div class="pop-box-content center"></div>
    </div>

    <div class="pop-box blue" id="rule">
        <img class="pop-close" src="images/pop_close_img.png" alt=""/>
        <div class="pop-box-title">活动规则</div>
        <div class="pop-box-content">
            <p>活动时间：</p>
            <p>9月3日-9月5日</p>
            <p><br/></p>
            <p>活动形式：</p>
            <p>限时1分钟答题猜灯谜，总共3题,全部猜中者， 可开启中秋红包，获得中石化BP送出的中秋节礼物。每道题只有1次作答机会，每个用户每天最多有3次参与机会。</p>
            <p><br/></p>
            <p>奖励发放:</p>
            <p>所获券将即时发放，请留意中石化BP微油站微信消息通知。</p>
            <p>获实物奖的用户，需填写收货信息，以便快递寄送。</p>
        </div>
        <div class="pop-box-tips">*最终解释权在法律允许范围内，归中石化碧辟所有。</div>
    </div>

    <div class="pop-box center blue" id="lose">
        <img class="pop-close lose" src="images/pop_close_img.png" alt=""/>
        <img class="lose-icon" src="images/lose_icon.png" alt="">
        <div class="pop-box-title">很遗憾没全部猜中</div>
        <div class="pop-box-content lose">
            <p>一不小心和</p>
            <p>礼物擦肩而过了呢</p>
        </div>
        <button id="again">再猜一次</button>
    </div>

    <div class="pop-box center blue" id="win">
        <img class="pop-close" src="images/pop_close_img.png" alt=""/>
        <img class="lose-icon" src="images/win_icon.png" alt="">
        <div class="pop-box-title win">恭喜您</div>
        <div class="pop-box-content win">
            <p>获得200-10油品券1张</p>
        </div>
        <button id="gotoForm">填写收货信息</button>
    </div>

    <div class="pop-box center" id="form">
        <div class="pop-box-form-title">
            <h1>恭喜你</h1>
            <p>获得中秋月饼礼盒</p>
            <span>务必填写真实信息以便快递</span>
        </div>
        <div class="form-input-box">
            <input type="text" placeholder="填写姓名"/>
        </div>
        <div class="form-input-box">
            <input type="number" placeholder="填写手机号码"/>
        </div>
        <div class="form-input-box">
            <input type="number" placeholder="填写验证码"/>
            <button>获取验证码</button>
        </div>
        <div class="form-input-box">
            <input type="text" placeholder="填写收货地址"/>
        </div>
        <button id="submit">提交</button>
    </div>
</div>

<div class="page index">
    <img class="moon animated flash slowest infinite" src="images/moon.png" alt=""/>
    <img class="lantern animated pulse slowest infinite" src="images/lantern.png" alt=""/>
    <img class="lantern two" src="images/lantern.png" alt=""/>
    <img class="lantern three" src="images/lantern.png" alt=""/>
    <img class="index-cloud" src="images/index_cloud.png" width="100%" alt=""/>
    <img class="index-person animated zoomIn slower" src="images/person_with_gift.gif" alt=""/>
    <div class="title animated bounceInDown delay-1s">你有一个包裹待查收</div>
    <div class="index-point animated bounceIn delay-2s"><img class="animated pulse infinite slower"
                                                             src="images/point.png" width="100%" alt=""/></div>
    <div class="point-click-box"></div>
</div>

<div class="page choose">
    <img class="cloud" src="images/cloud.png" width="100%" alt=""/>
    <img class="lantern choose" src="images/lantern.png" alt=""/>
    <div class="title animated bounceInDown">pick你心目中的C位月饼口味</div>
    <div class="choose-cake-box animated bounceIn delay-1s">
        <div class="choose-triangle-box"></div>
        <div class="choose-show-box"></div>
        <img class="moon-cake tsp animated" id="tsp" src="images/moon_cake_tsp.gif" alt=""/>
        <img class="moon-cake ds animated" id="ds" src="images/moon_cake_ds.gif" alt=""/>
        <img class="moon-cake nh animated" id="nh" src="images/moon_cake_nh.gif" alt=""/>
        <img class="moon-cake lr animated" id="lr" src="images/moon_cake_lr.gif" alt=""/>
        <img class="moon-cake ht animated" id="ht" src="images/moon_cake_ht.gif" alt=""/>
        <img class="moon-cake zc animated" id="zc" src="images/moon_cake_zc.gif" alt=""/>
    </div>
    <button class="bottom-btn" id="confirmChoose">确认</button>
</div>

<div class="page guide">
    <img class="cloud" src="images/cloud.png" width="100%" alt=""/>
    <div class="flex item-center h85">
        <div class="moon-cake-box">
            <div class="talk-box animated fadeIn delay-3s">嗨，我是流心奶黄君，我有着浓郁奶香和丝滑肉馅，一口下去让你流连忘返。</div>
            <div class="moon-cake-big animated bounceInDown">
                <div class="animated tada delay-1s"><img class="animated bounce delay-2s" src="images/moon_cake_nh.png"
                                                         width="100%" alt=""/></div>
            </div>
            <img class="scroll-img animated zoomIn delay-4s" src="images/scroll_img.png" alt=""/>
        </div>
    </div>
    <div class="bottom-btn-box flex">
        <button id="back">返回</button>
        <button id="goToGuess">GO</button>
    </div>
    <img class="rule-btn" src="images/rule_btn.png" alt=""/>
</div>

<div class="page question">
    <img class="cloud" src="images/cloud.png" width="100%" alt=""/>
    <div class="time-box">60</div>
    <div class="question-box">
        <div id="queOne">
            <div class="question-box-title">
                <p>月斜三更如一勾</p>
                <p>（打一字）</p>
            </div>
            <div class="question-box-item">A. 俏</div>
            <div class="question-box-item right">B. 乳</div>
            <div class="question-box-item">C. 彩</div>
            <div class="question-box-item">D. 染</div>
        </div>
        <div id="queTwo" style="display: none;">
            <div class="question-box-title">
                <p>一月照枝头，双星悬天下</p>
                <p>（打一字）</p>
            </div>
            <div class="question-box-item">A. 灭</div>
            <div class="question-box-item">B. 天</div>
            <div class="question-box-item">C. 秤</div>
            <div class="question-box-item right">D. 秋</div>
        </div>
        <div id="queThree" style="display: none;">
            <div class="question-box-title cy">猜成语</div>
            <div class="question-box-cy flex">
                <p>谜面：</p>
                <img src="images/cy_hqyx.png" alt=""/>
            </div>
            <div class="question-box-cy flex">
                <p>谜底：</p>
                <input id="cyText" type="text" name="花前月下"/>
                <img class="cy-result" src="images/wrong_icon.png" alt=""/>
            </div>
        </div>
        <div class="question-progress-box">
            <div class="question-progress-item onthis">1</div>
            <div class="question-progress-item">2</div>
            <div class="question-progress-item">3</div>
        </div>
    </div>
    <button class="bottom-btn" id="subQues">下一题</button>
    <img class="question-bottom" src="images/question_bottom.png" alt=""/>
</div>

<div class="page win">
    <img class="cloud" src="images/cloud.png" width="100%" alt=""/>
    <div class="title win animated bounceInDown">
        <p>全部猜中</p>
        <p>点击开启中秋红包</p>
    </div>
    <div class="redbag-box animated bounceInUp delay-1s">
        <img src="images/redbag_img.png" width="100%" alt=""/>
        <div class="index-point animated bounceIn delay-2s"><img class="animated pulse infinite slower"
                                                                 src="images/point.png" width="100%" alt=""/></div>
    </div>
</div>

<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vconsole.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/music.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    $(document).ready(function (e) {
        setTimeout(function (e) {
            $('.index').show();
        }, 1000);
        document.body.addEventListener('touchmove', touchmove, {passive: false});
    });

    let touchmove = function (event) {
        let e = event || window.event;
        e.preventDefault();
    };


    $('#gotoForm').click(function (e) {
        $('#win').hide();
        $('#form').show();
    });

    $('.redbag-box').click(function (e) {
        $('.pop-bg').addClass('show');
        $('#win').show();
    });

    let guessAgain = function (e) {
        $('.pop-bg').removeClass('show');
        $('#lose').hide();
        now = 0;
        correct = 0;
        time = 60;
        $('#subQues').text('下一题');
        $('.time-box').text(time);
        timer = setInterval(timeRoundFun, 1000);
        $('.cy-result').hide();
        $('#cyText').val('');
        $('.question-box-item').removeClass('show');
        $('.question-box-item').removeClass('onQue');
        $('#queTwo').hide();
        $('#queThree').hide();
        $('#queOne').show();
        $('.question-progress-item').removeClass('onthis');
        $('.question-progress-item').eq(0).addClass('onthis');
    };

    $('#again').click(function (e) {
        guessAgain();
    });

    let now = 0;
    let correct = 0;
    let confirm = true;
    $('#subQues').click(function (e) {
        if (!confirm) return;
        confirm = false;
        switch (now) {
            case 0:
                if ($('#queOne').find('.onQue').length == 0) {
                    confirm = true;
                    $('.pop-bg').addClass('show');
                    $('#tips').find('.pop-box-content').html('<p>请您选择您的答案！</p>');
                    $('#tips').show();
                    return;
                }
                $('#queOne').find('.onQue').addClass('show');
                if ($('#queOne').find('.onQue').hasClass('right')) correct++;
                setTimeout(function () {
                    confirm = true;
                    $('#queOne').hide();
                    $('#queTwo').show();
                    $('.question-progress-item').removeClass('onthis');
                    $('.question-progress-item').eq(1).addClass('onthis');
                }, 1000);
                now++;
                break;
            case 1:
                if ($('#queTwo').find('.onQue').length == 0) {
                    confirm = true;
                    $('.pop-bg').addClass('show');
                    $('#tips').find('.pop-box-content').html('<p>请您选择您的答案！</p>');
                    $('#tips').show();
                    return;
                }
                $('#queTwo').find('.onQue').addClass('show');
                if ($('#queTwo').find('.onQue').hasClass('right')) correct++;
                setTimeout(function () {
                    confirm = true;
                    $('#queTwo').hide();
                    $('#queThree').show();
                    $('.question-progress-item').removeClass('onthis');
                    $('.question-progress-item').eq(2).addClass('onthis');
                    $('#subQues').text('提交');
                }, 1000);
                now++;
                break;
            case 2:
                if ($('#cyText').val() == '') {
                    confirm = true;
                    $('.pop-bg').addClass('show');
                    $('#tips').find('.pop-box-content').html('<p>请输入您的答案！</p>');
                    $('#tips').show();
                    return;
                }
                clearInterval(timer);
                if ($('#cyText').val() == $('#cyText').attr('name')) {
                    correct++;
                    $('.cy-result').attr('src', 'images/right_icon.png');
                }
                $('.cy-result').show();
                setTimeout(function () {
                    confirm = true;
                    if (correct == 3) {
                        $('.question').fadeOut(500);
                        $('.win').fadeIn(500);
                        $('.index-point').show();
                    } else {
                        clearInterval(timer);
                        $('.pop-bg').addClass('show');
                        $('#lose').show();
                    }
                }, 1000);
                break;

        }
    });

    $('.question-box-item').click(function (e) {
        $('.question-box-item').removeClass('onQue');
        $(this).addClass('onQue');
    });

    let time = 60;
    let timer;
    $('#goToGuess').click(function (e) {
        $('.guide').fadeOut(500);
        $('.question').fadeIn(500);

        timer = setInterval(timeRoundFun, 1000);
    });

    $('#back').click(function (e) {
        $('.guide').fadeOut(500);
        $('.choose').fadeIn(500);
    });

    let timeRoundFun = function () {
        if (time <= 0) {
            $('.pop-bg').addClass('show');
            $('#lose').show();
            clearInterval(timer);
            return;
        }
        time--;
        $('.time-box').text(time);
    };

    $('.pop-close').click(function (e) {
        if ($(this).hasClass('lose')) guessAgain();
        $('.pop-bg').removeClass('show');
        $('.pop-box').hide();
    });

    $('.rule-btn').click(function (e) {
        $('.pop-bg').addClass('show');
        $('#rule').show();
    });

    $('#confirmChoose').click(function () {
        if ($('.choose-triangle-box').attr('id') == undefined) {
            $('.pop-bg').addClass('show');
            $('#tips').find('.pop-box-content').html('<p>请您选择您喜爱的月饼口味！</p>');
            $('#tips').show();
            return;
        }
        $('.choose').fadeOut(500);
        $('.guide').fadeIn(500);
        switch ($('.choose-triangle-box').attr('id')) {
            case 'tsp':
                $('.talk-box').text('嗨，我是桃山皮君，我有着高颜值，口感细腻轻盈，丝毫不会给你带来油腻感。');
                break;
            case 'ds':
                $('.talk-box').text('嗨，我是豆沙君，我绵沙松软，清甜温润，给你带来唇齿留香的老味道。');
                break;
            case 'nh':
                $('.talk-box').text('嗨，我是流心奶黄君，我有着浓郁奶香和丝滑肉馅，一口下去让你流连忘返。');
                break;
            case 'lr':
                $('.talk-box').text('嗨，我是莲蓉君，我自带一股仙气儿，甜而不腻，让你体验舌尖带滑的口感。');
                break;
            case 'zc':
                $('.talk-box').text('嗨，我是榨菜鲜肉君，别看我外表相貌平平，肚子里可是满满馅料，彻底征服你的味蕾。');
                break;
            case 'ht':
                $('.talk-box').text('嗨，我是火腿君，我酥酥软软，泛着火腿的陈香，让你每咬下一口都充满惊喜。');
                break;
        }
        $('.moon-cake-big').find('img').attr('src', 'images/moon_cake_' + $('.choose-triangle-box').attr('id') + '.gif');
    });

    $('.moon-cake').click(function (e) {
        $('.choose-triangle-box').attr('id', $(this).attr('id'));
        $('.moon-cake').removeClass('bounce');
        $(this).addClass('bounce');
        switch ($(this).attr('id')) {
            case 'tsp':
                $('.choose-show-box').text('桃山皮');
                break;
            case 'ds':
                $('.choose-show-box').text('豆沙');
                break;
            case 'nh':
                $('.choose-show-box').text('流心奶黄');
                break;
            case 'lr':
                $('.choose-show-box').text('莲蓉');
                break;
            case 'zc':
                $('.choose-show-box').text('榨菜鲜肉');
                break;
            case 'ht':
                $('.choose-show-box').text('火腿');
                break;
        }
    });

    $('.point-click-box').click(function (e) {
        $('.index-point').hide();
        $('.index-person').addClass('an');
        $('.index').fadeOut(500);
        $('.choose').fadeIn(500);
    });
</script>
</body>
</html>